<template>
<view>
<!--pages/topicality/jiancejigou/jiancejigou.wxml-->
<view class="body">
  <image src="http://imgbdb3.bendibao.com/xcxbdb/file/20212/10/20210210163237_74658.jpg" class="header" alt></image>
  <choose-city @chooseCity="chooseCity">
    <view class="/news/hesuanjiance/city_didian.php">
      <view class="city-name">{{city}}</view>
      <image src="/static/images/dwicon.png" class="city-icon" alt></image>
    </view>
  </choose-city>
  <view class="mian-body">
    <view class="search flex align-center">
      <view class="input">
        <input type="text" class="keywords" @input="input" :value="preValue" placeholder="请输入机构名称/地址/所在区县">
      </view>
      <view class="search-btn" @tap="search">搜索</view>
    </view>
    <view class="choose-content flex align-center ">
      <picker class="choose-box flex align-center" :range="quArr" @change="changequ" :value="quIndex" range-key="qu">
        <text>{{quArr[quIndex].qu}}</text>
        <image src="/static/images/dwicon.png"></image>
      </picker>
      <picker mode="selector" class="choose-box flex align-center" :range="jigouArr" @change="changejigou" :value="jigouIndex">
        <text>{{jigouArr[jigouIndex]}}</text>
        <image src="/static/images/dwicon.png"></image>
      </picker>
    </view>
    <view class="tips">已覆盖180余个城市，数据仍不断添加中</view>
    <view class="list">
      <view v-for="(item, index) in resultArr" :key="index" class="list-item">
        <view class="list-border name">{{item.network}}</view>
        <view class="list-border flex align-center address">
          <view class="left">机构地址</view>
          <view class="right">
            <text :selectable="true">{{item.address}}</text><text class="juli" v-if="item.distance">距你{{item.distance}}</text>
            <text class="map" @tap="goMap" :data-name="item.network"> [地图]</text></view>
        </view>
        <view class="list-border flex align-center tel" v-if="item.phone">
          <view class="left">联系电话</view>
          <view class="right">
            <text :user-select="true" @tap="dealPhone" :data-phone="item.phone">{{item.phone}}</text>
          </view>
        </view>
        <view class="list-border flex align-center quxian" v-if="item.area">
          <view class="left">所在区县</view>
          <view class="right">{{item.area}}</view>
        </view>
        <view class="list-border flex align-center quxian" v-if="item.inlet">
          <view class="left">预约入口</view>
          <view class="right" @tap="goyuyue" :data-url="item.inlet"><text class="green">{{item.type}}</text><text class="map"> 点击这里</text></view>
        </view>
      </view>

    </view>
    <view class="getMore" @tap="more" v-if="hasMore">
      查看更多
    </view>
    <view class="no-more" v-else>
      —— 没有更多数据 ——
    </view>
    <fangyi-tools id="fangyiTools"></fangyi-tools>
  </view>
</view>

<fixed-btn :city="city" :path="'/pages/topicality/hesuanjiance/hesuanjiance?city=' + city">
  <text slot="left">查看</text><text slot="right">核酸检测攻略</text>
</fixed-btn>
</view>
</template>

<script>
// pages/topicality/jiancejigou/jiancejigou.js
const app = getApp();
const util = require("../../../utils/util.js");
var QQMapWX = require("../../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({
  key: 'KR7BZ-XSQ3P-VGFD7-LNRZL-E7PXE-STF76'
});
import chooseCity from "../../../component/chooseCity/chooseCity";
import fangyiTools from "../../../component/fangyiTools/fangyiTools";
import fixedBtn from "../../../component/fixedBtn/fixedBtn";

export default {
  data() {
    return {
      city: '深圳',
      cityCode: 'sz',
      showModalStatus: false,
      resultArr: [],
      inputValue: '',
      //输入框输入值
      page: 0,
      //页数,从第0页开始
      totalNum: 0,
      //总条数
      hasMore: false,
      //是否有更多
      preValue: '',
      //预输入的value值
      //当前定位位置
      latitude: null,
      longitude: null,
      quArr: [],
      quIndex: 0,
      jigouArr: ['全部机构', '可供预约'],
      jigouIndex: 0
    };
  },

  components: {
    chooseCity,
    fangyiTools,
    fixedBtn
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    util.getUrl(app.globalData.url).then(async e => {
      uni.getLocation({
        type: 'gcj02',
        success: async res => {
          this.setData({
            latitude: res.latitude,
            longitude: res.longitude
          }); // 如果携带有城市和搜索参数

          if (options.city && options.content) {
            // 如果不带城市参数，获取定位
            if (!options.city) {
              this.getLocation();
            } else {
              this.setData({
                city: options.city,
                cityCode: await this.getCityCode(options.city),
                inputValue: options.content,
                preValue: options.content
              });
              this.selectComponent("#fangyiTools").getTools(this.cityCode);
              this.getqu();
              this.search();
            }
          } else {
            //没有携带参数进入页面
            this.getLocation();
            this.selectComponent("#fangyiTools").getTools(this.cityCode);
            this.getqu();
            this.render();
          }
        }
      });
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: '各地核酸检测机构查询'
    };
  },
  methods: {
    // 获取定位
    getLocation() {
      qqmapsdk.reverseGeocoder({
        success: res => {
          let city = res.result.address_component.city;

          if (city && !city.includes(this.city)) {
            uni.showModal({
              content: '您当前定位城市为' + city + '\n是否需要切换到' + city + '检测机构查询？',
              success: async res => {
                if (res.confirm) {
                  city = city.substr(0, city.length - 1);
                  const cityCode = await this.getCityCode(city);
                  this.setData({
                    city,
                    cityCode,
                    resultArr: [],
                    page: 0
                  });
                  this.getqu();
                  this.render();
                  this.selectComponent("#fangyiTools").getTools(this.cityCode);
                }
              }
            });
          }
        }
      });
    },

    // 获取cityCode,参数为市
    async getCityCode(city) {
      const res = await util.request("citycode.php", {
        action: "city",
        city: city
      }, "POST");
      return res.data.data[0].citycode;
    },

    // 确定选择城市
    chooseCity(e) {
      this.setData({
        city: e.detail.city,
        cityCode: e.detail.cityCode,
        resultArr: [],
        page: 0,
        quIndex: 0,
        jigouIndex: 0
      });
      this.selectComponent("#fangyiTools").getTools(this.cityCode);
      this.getqu();
      this.render();
    },

    //通过cityCode获取区
    getqu() {
      util.request('zhuanti.php', {
        action: 'get_qu',
        citycode: this.cityCode
      }).then(e => {
        let quArr = e.data.data;
        quArr.unshift({
          qu: '全部区域'
        });
        this.setData({
          quArr
        });
      });
    },

    // 渲染页面
    render(keywords, offset, qu) {
      util.request('zhuanti.php', {
        action: "jcdidian",
        citycode: this.cityCode,
        keywords: keywords || '',
        offset: offset || 0,
        limit: 5,
        qu: this.quIndex == 0 ? '' : this.quArr[this.quIndex].qu,
        //是否选择全部区域
        jg: parseInt(this.jigouIndex) + 1
      }, 'POST').then(e => {
        const list = e.data.data.list;

        if (list) {
          if (this.latitude && this.longitude) {
            list.forEach(item => {
              const distance = this.getDistance(this.latitude, this.longitude, item.lat, item.lon);
              item.distance = distance;
            });
          }

          this.setData({
            resultArr: this.resultArr.concat(list),
            totalNum: e.data.data.count.c,
            hasMore: true
          });

          if (this.resultArr.length >= this.totalNum) {
            this.setData({
              hasMore: false
            });
            return;
          }
        } else {
          this.setData({
            hasMore: false,
            totalNum: 0
          });
        }
      });
    },

    //改变选择机构
    changejigou(e) {
      this.setData({
        jigouIndex: e.detail.value,
        resultArr: [],
        page: 0
      });
      this.render();
    },

    changequ(e) {
      this.setData({
        quIndex: e.detail.value,
        resultArr: [],
        page: 0
      });
      this.render();
    },

    // 输入框赋值
    input(e) {
      this.setData({
        inputValue: e.detail.value
      });
    },

    // 搜索
    search() {
      if (this.inputValue.trim()) {
        this.setData({
          resultArr: [],
          page: 0
        });
        this.render(this.inputValue, 0);
      } else {
        uni.showToast({
          title: '请输入想要查询的地区',
          icon: 'none'
        });
      }
    },

    // 查看更多
    more() {
      this.setData({
        page: this.page + 1
      });
      this.render(this.inputValue, this.page * 5);
    },

    // 拨打电话
    dealPhone(e) {
      uni.makePhoneCall({
        phoneNumber: e.currentTarget.dataset.phone
      });
    },

    goMap(e) {
      util.navContact('ss', 'https://ditu.so.com/?t=map&src=bendibao&k=' + e.currentTarget.dataset.name + '&city=' + this.city);
    },

    goyuyue(e) {
      util.navContact('ss', e.currentTarget.dataset.url);
    },

    // 
    toHome() {
      uni.navigateTo({
        url: '/pages/topicality/hesuanjiance/hesuanjiance?city=' + this.city
      });
    },

    //进行经纬度转换为距离的计算
    getDistance: function (lon1, lat1, lon2, lat2) {
      if (lon2 && lat2) {
        var radLat1 = lat1 * Math.PI / 180.0;
        var radLat2 = lat2 * Math.PI / 180.0;
        var a = radLat1 - radLat2;
        var b = lon1 * Math.PI / 180.0 - lon2 * Math.PI / 180.0;
        var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
        s = s * 6378.137; // EARTH_RADIUS;

        s = Math.round(s * 10000) / 10000;
        s = s.toFixed(1);
        return s + 'km';
      } else {
        return false;
      }
    }
  }
};
</script>
<style>
p {
  margin: 0;
}


.body {
  background-color: rgb(248, 248, 248);
  padding-bottom: 110rpx;
}

.city {
  position: absolute;
  top: 26rpx;
  right: 25rpx;
  height: 50rpx;
  display: flex;
  padding: 0 15rpx;
  align-items: center;
  justify-content: center;
  line-height: 37.5rpx;
  border-radius: 187.5rpx;
  background-color: #ffffff;
}

.city-name {
  font-weight: 600;
  color: rgb(14, 20, 87);
  font-size: 26rpx;
}

.city-icon {
  width: 18rpx;
  height: 10rpx;
  margin-left: 10rpx;
}


.header {
  width: 100%;
  height: 210rpx;
  display: block;
}

.search {
  padding: 21rpx 31rpx;
  font-size: 31rpx;
  color: #105683;
  text-align: center;
  background-color: #FFFFFF;
}

.input {
  width: 77%;
  height: 73rpx;
  margin-right: 43rpx;
  line-height: 76rpx;
  padding-left: 41rpx;
  text-align: left;
  background-color: #F6F6F6;
  border-radius: 36rpx;
}

input {
  width: 100%;
  height: 100%;
  font-size: 29rpx;
  line-height: 76rpx;
  background-color: transparent;
  border: 0;
  outline: 0;
  padding: 0;
}
.choose-content{
  background: #ffffff;
}


.choose-content .choose-box {
  flex: 1;
  justify-content: center;

}
.choose-content .choose-box image{
  width: 18rpx;
  height: 10rpx;
  margin-bottom: 5rpx;
}

.choose-box text {
  color: #339933;
  line-height: 86rpx;
  margin-right: 10rpx;
}

body {
  position: relative;
  background-color: rgb(248, 248, 248);
}

.list {
  font-size: 29rpx;
  color: #999999;
}

.list-item {
  padding: 30rpx 31rpx;
  margin: 22rpx;
  background-color: #FFFFFF;
  border-radius: 14rpx;
}

.name {
  font-size: 35rpx;
  color: #333333;
  font-weight: 700;
}

.list-border {
  margin-bottom: 34rpx;
  padding-bottom: 32rpx;
  border-bottom: 2rpx solid #F2F2F2;
}

.left {
  flex-shrink: 0;
  margin-right: 48rpx;
}

.juli {
  margin-left: 20rpx;
  color: #339933;
}
.green{
  color: #339933;
}

.map {
  color: #5195DD;
}

.tel .right {
  color: #006699;
}

.list-item .list-border:last-child {
  border: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

input::-webkit-input-placeholder {
  color: #CCCCCC;
}

input::-moz-placeholder {
  color: #CCCCCC;
}

input:-moz-placeholder {
  color: #CCCCCC;
}

input:-ms-input-placeholder {
  color: #CCCCCC;
}

.getMore {
  height: 75rpx;
  margin: 22rpx;
  margin-top: 25rpx;
  line-height: 75rpx;
  font-size: 27rpx;
  border-radius: 37rpx;
  text-align: center;
  background-color: #F0EEF2;
}

.no-more {
  font-size: 27rpx;
  color: #888888;
  text-align: center;
}

.tips {
  margin-top: 20rpx;
  font-size: 27rpx;
  color: #006699;
  text-align: center;
}

/* 底部fixed */
.fixed {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: auto;
  background: #fff;
  padding: 10rpx 0;

}

.share {
  width: 35%;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 56rpx;
  color: #ffffff;
  font-weight: 500;
  background-color: #5395DE;
  margin-left: 20rpx;
}

.share view {
  display: flex;
  justify-content: center;
  align-items: center;
}

.share-icon {
  width: 30rpx;
  height: 30rpx;
  margin-left: 10rpx;
}

.other-city {
  width: 65%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border: 0;
  border-radius: 56rpx;
  margin-left: 20rpx;
  margin-right: 20rpx;
  margin-top: 10rpx;
  color: #ffffff;
  background: #5395DE;
}

.bottom-mask {
  position: fixed;
  bottom: 0;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, .4);
}

.bottom-share-box {
  position: fixed;
  bottom: 0;
  height: 380rpx;
  width: 100%;
  justify-content: space-between;
  padding-top: 80rpx;
  background-color: rgb(251, 253, 250);
  border-top-left-radius: 54rpx;
  border-top-right-radius: 54rpx;
  overflow-x: hidden;
  z-index: 999999;
}

.bottom-share-box .flex {
  padding: 20rpx 20%;
  z-index: 99;
  box-sizing: border-box;
}

.bottom-share-box .share-box-img {
  width: 100rpx;
  margin-bottom: 16rpx;
}

.bottom-share-box .share-box-path {
  font-size: 24rpx;
}

.bottom-share-box .flex {
  width: 100%;
}

.line {
  height: 60rpx;
  border-right: 2rpx solid #ccc;
}

.cancel {
  width: 100%;
  height: 102rpx;
  margin-top: 30rpx;
  line-height: 102rpx;
  font-size: 34rpx;
  text-align: center;
  background-color: #FFFFFF;
}

button {
  padding: 0;
  margin: 0;
  background-color: transparent;
}

.share-box {
  margin-bottom: 60rpx;
  margin-top: 40rpx;
}

.share-box-img {
  width: 100rpx;
  height: 100rpx;
}

.shar-box-item {
  line-height: normal;
}

.share-box-title {
  width: 100%;
  margin-bottom: 58rpx;
  font-size: 32rpx;
  color: #BFBFBF;
  text-align: center;
}

.share-box-path {
  font-size: 22rpx;
  color: #141414;
}

.shar-box-list {
  width: 70%;
}
</style>